body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #34495e;
}

main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    div.pic {
        width: auto;
        height: 300px;
        overflow: hidden;
        position: relative;

        &:nth-child(1)>div {
            width: 100%;
            height: 100%;
        }

        &:nth-child(1)>div.introduction {
            width: 100%;
            height: 100%;
            position: absolute;
            top: -100%;
            background-color: white;
            text-align: center;
            transition-duration: 1s;
            z-index: 1;
        }

        &:nth-child(1)>div.image {
            position: absolute;
            transition-duration: 1s;
            width: 100%;
            height: 100%;
        }

        &:nth-child(1):hover>div.introduction {
            transform: translateY(100%);
        }

        &:nth-child(1):hover>div.image {
            transform: translateY(100%);
        }

        &:nth-child(2)>div.image {
            position: absolute;
            width: 100%;
            height: 100%;
            transition-duration: 1s;
        }

        &:nth-child(2)>div.introduction {
            width: 100%;
            height: 100%;
            position: absolute;
            text-align: center;
            background-color: white;
        }

        &:nth-child(2):hover>div.image {
            transform: translateY(100%);
        }

        &:nth-child(3)>div.introduction {
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: white;
            z-index: -1;
            transform: rotateY(180deg);
            transition-duration: 1s;
            text-align: center;
        }

        &:nth-child(3)>div.image {
            backface-visibility: hidden;
            transition-duration: 1s;
        }

        &:nth-child(3) {
            perspective: 900px;
        }

        &:nth-child(3):hover>div.image {
            transform: rotateY(180deg);
        }

        &:nth-child(3):hover>div.introduction {
            transform: rotateY(0deg);
        }
    }
}